<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <#assign base=request.contextPath/>
    <#setting  number_format="0.##"/>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="${base}/backstage/layui/css/layui.css" media="all">
    <link href="${base}/sweep/css/mui.css" rel="stylesheet"/>
    <link href="${base}/sweep/css/app.css" rel="stylesheet"/>
    <link rel="stylesheet" href="${base}/sweep/gou/css/style.css">
    <script src="${base}/backstage/layui/layui.js?t=1"></script>
    <script src="${base}/backstage/js/jquery-1.8.3.min.js?t=1"></script>
    <script src="${base}/backstage/js/loading.js?t=1"></script>
    <style>
        .mui-row.mui-fullscreen>[class*="mui-col-"] {
            height: 100%;
        }

        .mui-col-xs-3,
        .mui-col-xs-9 {
            overflow-y: auto;
            height: 100%;
        }

        .mui-segmented-control .mui-control-item {
            line-height: 50px;
            width: 100%;
        }

        .mui-control-content {
            display: block;
        }

        .mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active {
            background-color: #fff;
        }
        .mui-plus .plus{
            display: inline;
        }

        .plus{
            display: none;
        }

        #topPopover {
            position: fixed;
            top: 16px;
            right: 6px;
        }
        #topPopover .mui-popover-arrow {
            left: auto;
            right: 6px;
        }
        p {
            text-indent: 22px;
        }
        span.mui-icon {
            font-size: 14px;
            color: #007aff;
            margin-left: -15px;
            padding-right: 10px;
        }
        .mui-popover {
            height: 300px;
        }
        .mui-content {
            padding: 10px;
        }
    </style>
</head>
<body>
 <input type="hidden" value="${tableNumberId}" id="tableNumberId"/>
 <input type="hidden" value="${userId}" id="userId"/>
 <input type="hidden" value="${uId}" id="uId"/>
<div id="slider" class="mui-slider" >
    <div class="mui-slider-group">
        <#list userImage as userImage>
            <div class="mui-slider-item">
                <a href="#">
                    <img src="${userImage.url}" style="height: 200px;">
                </a>
            </div>
        </#list>
    </div>
</div>
<br>


<div style="position: relative;height: 600px;" >
    <div class="mui-content mui-row mui-fullscreen">
        <div class="mui-col-xs-3">
            <div id="segmentedControls" class="mui-segmented-control mui-segmented-control-inverted  mui-segmented-control-vertical">
                <!--全部-->
<#--                <a class="mui-control-item " onclick="small(1)" data-index="0" href="#1">全部</a>-->
                <#list varietyClassification as varietyClassification>
                    <a class="mui-control-item " onclick="small('${varietyClassification.id}')" data-index="0" href="#${varietyClassification.id}">${varietyClassification.varietyName}</a>
                </#list>
            </div>
        </div>
        <div id="segmentedControlContents" class="mui-col-xs-9" style="border-left: 1px solid #c8c7cc;">
            <#list commodity as commodity>
                <div id="#${commodity.classification}" class="mui-control-content">
                    <ul class="mui-table-view" >
                        <li class="mui-table-view-cell mui-media" >
                            <a href="javascript:;">
                                <img class="mui-media-object mui-pull-left" src="${commodity.commodityUrl}" onclick="details('${commodity.id}')">
                                <div class="mui-media-body">
                                    <span>${commodity.commodityName}</span><br>
                                    <p>
                                        <span style="color: red;font-size: 12px;">￥${commodity.price}</span>&nbsp;&nbsp;
                                        <button type="button" style="float: right;width: 24%;background-color: #0c9076;color: #ffffff" value="${commodity.id}" class="primary">添加</button>
                                    </p>
                                </div>
                            </a>
                        </li>
                    </ul>
                </div>
            </#list>


        </div>
    </div>
</div>

<#-- <div style="position: absolute;bottom:0px;">-->
<#--         <div class="site-demo-button"  id="layerDemo">-->
<#--             <button data-method="notice" class="layui-btn"><span id="cartN">总计：￥<span id="totalpriceshow">0</span></span>元</button>-->
<#--         </div>-->
<#-- </div>-->
<#-- <div style="position: absolute;bottom:0px;">-->
<#--         <button  class="layui-btn" onclick="jie()">支付</button>-->
<#-- </div>-->
 <div class="footer">
     <p>
     <div class="left site-demo-button" id="layerDemo">
         <button data-method="notice" style="width: 200%" class="layui-btn"><span id="cartN">总计：￥<span id="totalpriceshow">0</span></span>元</button>
     </div>
     <div style="float: right">
         <button class="layui-btn" onclick="jie()" style="position: relative;top:4.5px;width: 100px;">支付</button>
     </div>
     </p>
 </div>
<script src="${base}/sweep/js/mui.js?t=1"></script>
<script type="text/javascript" charset="utf-8">
    var gallery = mui('#slider');
    gallery.slider({
        interval: 1000//自动轮播周期,若为0则不自动播放,默认为0；
    });
    mui.init();
</script>
<script type="text/javascript" src="${base}/sweep/gou/js/jquery.min.js"></script>
<script type="text/javascript" src="${base}/sweep/gou/js/add.js"></script>
<script type="text/javascript" src="${base}/sweep/gou/js/vue.min.js"></script>

<script>

    layui.use(['form', 'layer', 'upload'], function () {
        var form = layui.form
            , layer = layui.layer
            , $ = layui.jquery
            , upload = layui.upload;
    })

    //查询对应商品
    function small(id) {
        $.ajax({
            type: "GET", //提交方式
            data: {"id": id,"userId":'${sessionUserId}'},
            url: "${base}/QRCode/selectClassificationId",//路径
            async:false,
            success: function (data) {//返回数据根据结果进行相应的处理
                if(data.code==200){
                    $("#segmentedControlContents").html("")
                    for (var i = 0; i < data.data.length; i++) {
                        $("#segmentedControlContents").append(
                            '<div id="' + data.data[i].classification + '" class="mui-control-content">' +
                            '<ul class="mui-table-view" >' +
                            '<li class="mui-table-view-cell mui-media">' +
                            '<a href="javascript:;">' +
                            '<img class="mui-media-object mui-pull-left" onclick="details(\''+data.data[i].id+'\')" src="'+data.data[i].commodityUrl+'">' +
                            '<div class="mui-media-body">' +
                            '<span>'+data.data[i].commodityName+'</span><br>' +
                            '<p>' +
                            '<span style="color: red;font-size: 12px;">￥'+data.data[i].price+'</span>&nbsp;&nbsp;' +
                            '<button type="button" style="float: right;width: 24%;background-color: #0c9076;color:#ffffff" value="'+data.data[i].price+","+data.data[i].id+'" class="primary">添加</button>'+
                            '</p>' +
                            '</div>' +
                            '</a>' +
                            '</li>' +
                            '</ul>' +
                            '</div>'
                        )
                    }
                abc()
                }
            }
        });
    }
    <!--跳转详情-->
    function details(id) {
        window.location.href = "${base}/QRCode/details.html?id="+id;
    }

    $(function(){
        abc();
    } )

    function abc(){
        //添加
        $(".primary").click(function() {
            if($("#uId").val()==""){
                layer.msg('该访问已过期,请重新扫码下单!')
                return
            }
            var goodId = this.value;
            $.ajax({
                type: "POST", //提交方式
                data: {"goodId":goodId,"tableNumberId":$("#tableNumberId").val(),"userId":$("#userId").val(),"uId":$("#uId").val()},
                url: "${base}/QRCode/saveOrder",//路径
                async:false,
                success: function (data) {//返回数据根据结果进行相应的处理
                    if(data.code==200){
                        layer.msg("添加成功")
                        sum()
                    }else{
                        layer.msg("添加失败")
                    }
                }
            });
        })

    }


    //结算
    function jie() {
        <#--window.location.href = "${base}/QRCode/QRCodeDetails.html?uId="+$("#uId").val();-->
        if($("#uId").val()==""){
            layer.msg('该访问已过期,请重新扫码下单!')
            return
        }
        if(document.getElementById("totalpriceshow").innerText==0){
            layer.msg("请选择菜品在进行下单!")
            return;
        }
        layer.msg("下单成功")
        document.getElementById("totalpriceshow").innerText = '0'
        $("#uId").val("")
    }

    //计算总和
    function sum() {
        $.ajax({
            type: "get", //提交方式
            data: {"uId":$("#uId").val()},
            url: "${base}/QRCode/selectTemporaryByUId",//路径
            async:false,
            success: function (data) {//返回数据根据结果进行相应的处理
                if(data.code==200){
                    document.getElementById("totalpriceshow").innerText = data.data
                }else{
                    layer.msg("下单失败")
                }
            }
        });
    }

        layui.use('layer', function(){ //独立版的layer无需执行这一句
        var $ = layui.jquery, layer = layui.layer; //独立版的layer无需执行这一句

        //触发事件
        var active = {
        notice: function(){
      //示范一个公告层
      layer.open({
        type: 2
        ,title: false //不显示标题栏
        ,closeBtn: false
        ,area: ['90%','50%']
        ,shade: 0.8
        ,id: 'LAY_layuipro' //设定一个id，防止重复弹出
        ,btn: [ '关闭窗口']
        ,btnAlign: 'c'
        ,moveType: 1 //拖拽模式，0或者1
        ,content: '${base}/QRCode/QRCodeDetails.html?uId='+$("#uId").val()

      });
    }
    }
        $('#layerDemo .layui-btn').on('click', function(){
            var othis = $(this), method = othis.data('method');
            active[method] ? active[method].call(this, othis) : '';
        });

    });






</script>

<script>
    mui.init();
    //弹出框可滑动
    mui('.mui-scroll-wrapper').scroll();
    mui('body').on('shown', '.mui-popover', function(e) {
        //console.log('shown', e.detail.id);//detail为当前popover元素
    });
    mui('body').on('hidden', '.mui-popover', function(e) {
        //console.log('hidden', e.detail.id);//detail为当前popover元素
    });

</script>
</html>